<template>
    <div class="div_box">
        <div class="container">
            <div style="
            position: relative;
            display: flex;
            justify-content: center;
            height: 100%;
          ">
                <div id="video-container" :style="test ? '' : '  background-color: transparent;'"></div>
                <div class="error">{{ test }}</div>
                <div class="huifang-box">
                    <div class="huifang">
                        <div class="huifang-txt" @click="live" :style="flag
                            ? 'background-color: #71a3bc;color: #fff;'
                            : 'color: rgba(255,255,255,.6)'
                            ">
                            直播
                        </div>
                        <div class="huifang-txt" @click="playback" :style="!flag
                            ? 'background-color: #71a3bc;color: #fff;'
                            : 'color: rgba(255,255,255,.6)'
                            ">
                            回放
                        </div>
                    </div>
                </div>
                <div class="encoding-box">
                    {{ dialogAlarmInfo.imei }}
                </div>
            </div>
        </div>

        <!-- <video controls :src="urlflv"></video> -->
        <!-- <video id="videoElement" controls></video> -->

    </div>
</template>

<script>
import EZUIKit from "ezuikit-js"; // ezuikit-js7.6.4
import flvjs from "flv.js"

export default {
    name: "HelloWorld",
    props: {
        //   msg: String,
        //   deviceInfo: {
        //     type: Object,
        //     default: () => { },
        //   },
        sn: {
            type: String,
            default: () => "",
        },
        dialogAlarmInfo:{
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            player: null,
            player2: null,
            flag: true,
            test: "",
            urlflv: ""
        };
    },
    mounted: () => { },
    methods: {
        // 获取token
        gettoken() {
            if (this.player) {
                this.destroy();
            }
            fetch(
                `https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`,
                {
                    method: "POST",
                }
            )
                .then((response) => response.json())
                .then((res) => {
                    console.log(res);
                    this.accessToken = res.data.accessToken;
                    this.getaddress();
                    // this.playback();
                });
        },
        // 获取播放地址接口
        getaddress() {
            this.flag = true;
            this.test = "";
            fetch(
                `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.sn}&type=1&supportH265=1&quality=2`,
                {
                    method: "POST",
                }
            )
                .then((response) => response.json())
                .then((res) => {
                    console.log(res);
                    // var videoElement = document.getElementById('videoElement');
                    // var flvPlayer = flvjs.createPlayer({
                    //     type: 'flv',
                    //     url:res.data.url
                    // });
                    // flvPlayer.attachMediaElement(videoElement);
                    // flvPlayer.load();
                    // flvPlayer.play();
                    // return
                    if (res.code != 200) {
                        this.test = res.msg;
                        return;
                    }
                    this.url = res.data.url;
                    let player = new EZUIKit.EZUIKitPlayer({
                        id: "video-container", // 视频容器ID
                        accessToken: this.accessToken,
                        url: res.data.url,
                        // url: 'ezopen://open.ys7.com/33010468992637119318:33011030991327907487/1.rec',
                        // template: "pcLive", // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
                        template: "fa37d7de1c18428892fc98882e3b6416",
                        plugin: ["talk"], // 加载插件，talk-对讲
                        useHardDev: true,
                        width: 700,
                        height: 400,
                    });
                    this.player = player;
                });
        },
        live() {
            this.player && this.destroy();
            this.getaddress();
        },
        playback() {
            this.flag = false;
            this.test = "";
            this.player && this.destroy();
            fetch(
                `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.sn}&type=2&supportH265=1&quality=2`,
                {
                    method: "POST",
                }
            )
                .then((response) => response.json())
                .then((res) => {
                    console.log(res.data.url, '213123');
                    // this.urlflv = res.data.url;
                    // var videoElement = document.getElementById('videoElement');
                    // var flvPlayer = flvjs.createPlayer({
                    //     type: 'flv',
                    //     url: res.data.url
                    //     // url: 'https://rtmp02open.ys7.com:9188/v3/openlive/33010468992637119318:33010581991327599880_1_2.flv?expire=1765869513&id=790599095910457344&t=6ee87f2c271c163774e67498bbcbca76a33d2e78cb7151a38ec39258385eb150&ev=100&devProto=gb28181'
                    // });
                    // flvPlayer.attachMediaElement(videoElement);
                    // flvPlayer.load();
                    // flvPlayer.play();
                    // return
                    if (res.code != 200) {
                        this.test = res.msg;
                        return;
                    }
                    this.url = res.data.url;
                    let player = new EZUIKit.EZUIKitPlayer({
                        id: "video-container", // 视频容器ID
                        accessToken: this.accessToken,
                        url: res.data.url,
                        template: "84ffa276639f44c8a39859138531137f",
                        // url: 'ezopen://open.ys7.com/33010468992637119318:33011030991327907487/1.rec',
                        // template: "pcRec", // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
                        plugin: ["talk"], // 加载插件，talk-对讲
                        width: 700,
                        height: 400,
                    });
                    this.player = player;
                });
        },
        destroy() {
            var destroyPromise = this.player.destroy();
            destroyPromise.then((data) => {
                console.log("promise 获取 数据", data);
            });
            this.player = null;
        },
    },
    created() {
        this.gettoken()
    },
};
</script>

<style lang="less" scoped>
.div_box {
    overflow: auto;
    width: 100%;
    // height: 100%;
    height: 400px;
    display: flex;
    justify-content: center;

    video {
        width: 100%;
    }

    .container {
        width: 100%;
        height: 100%;
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        // position: relative;

          // 萤石云宽度撑满设置
        //   >div:first-of-type {
            // width: 100%;
            // height: 100%;

            // ::v-deep>div:first-of-type {
            //     width: 100% !important;
            //     height: 100% !important;
            // }

            // /* 注意：你不能在::v-deep内部再嵌套::v-deep，但你可以继续选择更深层次的元素 */
            // ::v-deep>div:first-of-type>div:first-of-type {
            //     width: 100% !important;
            //     height: 100% !important;
            //     position: relative !important;
            // }

            // ::v-deep>div:first-of-type>div:first-of-type div {
            //     width: 100% !important;
            //     height: 100% !important;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            //     position: absolute;
            // }

            // ::v-deep>div:first-of-type>div:first-of-type .loading {
            //     position: absolute;
            //     bottom: 9%;
            // }

            // ::v-deep canvas {
            //     width: 100% !important;
            //     height: 100% !important;
            // }
        // }

        #video-container {
            width: 800px;
            // height: 500px;
            height: 100%;
            background-color: @primarywarn;
        }

        .error {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: red;
        }

        .encoding-box {
            width: 300px;
            position: absolute;
            height: 48px;
            display: flex;
            align-items: center;
            left: 6px;
            background-color: transparent;
            z-index: 999;
            color: #fff;
        }

        .huifang-box {
            position: absolute;
            height: 48px;
            display: flex;
            align-items: center;
            right: 12px;
        }

        .huifang {
            display: flex;
            background-color: #3d3d3d;
            border-radius: 20px;
            font-size: 12px;

            >div {
                width: 54px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                color: #000000;
                cursor: pointer;

                &:hover {
                    color: rgba(255, 255, 255, 1);
                }
            }

            .huifang-txt {
                &:hover {
                    color: rgba(255, 255, 255, 1) !important;
                }
            }
        }
    }
}

::v-deep .header-controls .theme-icon-item {
    display: none;
}

.camara_box {
        height: 100%;
        background: black;
        position: relative;
        width: 100%;
        border: 1px solid #cccccc73;
        box-sizing: border-box;
        cursor: pointer;

        // 萤石云宽度撑满设置
        >div:first-of-type {
            width: 100%;
            height: 100%;

            ::v-deep>div:first-of-type {
                width: 100% !important;
                height: 100% !important;
            }

            /* 注意：你不能在::v-deep内部再嵌套::v-deep，但你可以继续选择更深层次的元素 */
            ::v-deep>div:first-of-type>div:first-of-type {
                width: 100% !important;
                height: 100% !important;
                position: relative !important;
            }

            ::v-deep>div:first-of-type>div:first-of-type div {
                width: 100% !important;
                height: 100% !important;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
            }

            ::v-deep>div:first-of-type>div:first-of-type .loading {
                position: absolute;
                bottom: 9%;
            }

            ::v-deep canvas {
                width: 100% !important;
                height: 100% !important;
            }
        }

        // 萤石云
        .camara_video {
            z-index: 1;
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            height: 100%;
        }

        .spaceName {
            color: #e9e9e9;
            position: absolute;
            top: 4%;
            left: 4%;
            z-index: 2;
        }

        .iconfontcha {
            color: #ffffff;
            position: absolute;
            top: 15px;
            right: 20px;
            z-index: 9999;
            cursor: pointer;
        }

        .deviceId {
            color: #e9e9e9;
            position: absolute;
            top: 9%;
            left: 4%;
            z-index: 2;
        }

        .none {
            color: #909399;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
    }
</style>